<template>
	<div>
		<navHeader></navHeader>
		<van-swipe :autoplay="3000" height='250'>
		  <van-swipe-item v-for="(image, index) in goods.img" @click="preview" :key="index">
		    <img :src="image" />
		  </van-swipe-item>
		</van-swipe>
		<van-row>
		  <van-col span="24"><h3>{{goods.content}}</h3></van-col>
		  <van-col span="24">发布时间:2017-05-16</van-col>
		</van-row>
		<van-grid  :column-num="3">
		  <van-grid-item :text="goods.price+'万元'" />
		  <van-grid-item :text="goods.start+'年'" />
		  <van-grid-item  :text="goods.last+'万公里'" />
		</van-grid>
		<van-row type='flex' align='center'>
		  <van-col span="12"><h3>{{goods.content}}</h3></van-col>
		  <van-col span="4" style='color: red;'>{{goods.price}}万元</van-col>
		  <van-col span="8">
			  <van-button type="primary" @click='addToCart'>加入购物车</van-button>
		  </van-col>
		  
		</van-row>
		<h3>同类车推荐</h3>
		<div  v-for="(item,index) in list" :key='item.id'>
			<van-card
			  @click='toDetail(item)'
			  :price="item.price+'W'"
			  :title="item.content"
			  :thumb="item.img[0]"
			  :tag='JSON.stringify(item.start)'
			>
			<span slot='num'>{{item.last}}万公里</span>
			</van-card>
			
		
		</div>
	</div>
</template>

<script>
	import navHeader from '../components/nav.vue'
	import { ImagePreview } from 'vant';
	import { mapActions } from 'vuex';
	export default {
		components:{
			navHeader
		},
		data(){
			return{
				goods:'',
				list:'',
			}
		},
		created() {
			
			this.goods = JSON.parse(localStorage.getItem('goods'));
			console.log(this.goods)
			this.list =this.$api.goodsData[parseInt(Math.random()*4)]
		},
		
		methods:{
			...mapActions(['addCart']),
			addToCart(){
				this.addCart(this.goods);
			},
			preview(){
				ImagePreview(this.goods.img);
			},
			toDetail(goods){
				console.log(goods)
				this.$router.push({path:'/detail',query:{'goods':goods}});
			}
			
		}
	}
</script>

<style>
</style>
